<script setup lang="ts">
import { ref } from 'vue'
import AddMsg from './AddMsg.vue'

const myModal = ref()
const addMsgRef = ref()

const showModal = (list: Array<any>) => {
  dataSource.value = []

  if (list.length > 0) {
    list.map(item => {
      item.identifying = Math.random().toString(36).substr(2)
      dataSource.value.push(item)
    })

    // console.log('dataSource=', dataSource.value)    
  }
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: [list: Array<any>]
}>()

defineExpose({
  showModal,
})

const addMsg = () => {
  addMsgRef.value.showModal()
}

const edit = (record: object) => {
  addMsgRef.value.showModal(record)
}

const del = (id: string) => {
  dataSource.value = dataSource.value.filter(item => item.identifying != id)
}

const dataSource = ref<Array<any>>([])
const columns = [
  // {
  //   title: 'ID',
  //   key: 'id',
  //   width: 180,
  // },
  // {
  //   title: '关键字',
  //   key: 'keyword',
  //   width: 150,
  // },
  {
    title: '类型',
    key: 'type',
    width: 120,
  },
  {
    title: '回复内容',
    key: 'content',
    width: 150,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
  },
]

const getList = (data: any) => {
  // console.log('dataSource=', dataSource.value)
  let targetIndex = dataSource.value.findIndex(item => item.identifying == data.identifying)

  if (targetIndex != -1) {
    dataSource.value[targetIndex].keyword = data.keyword
    dataSource.value[targetIndex].content = data.content
  } else {
    dataSource.value.push(data)
  }
}

const submit = () => {
  emit('refresh', dataSource.value)
  myModal.value.cancelModal()
  dataSource.value = []
}
</script>

<template>
  <MyModal ref="myModal" title="主动好友招呼消息" :top="25" :width="900">
    <template #content>
      <div>
        <a-button type="primary" style="border-radius: 6px" @click="addMsg">
          添加打招呼信息
        </a-button>
      </div>

      <a-table
        style="overflow-x: scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        rowKey="id"
        :scroll="{ y: 300 }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <div style="width: 180px">{{ record.identifying }}</div>
          </template>

          <template v-else-if="column.key === 'keyword'">
            <div style="width: 150px">{{ record.keyword }}</div>
          </template>

          <template v-else-if="column.key === 'type'">
            <span v-if="record.type == 1">文本</span>
            <span v-if="record.type == 2">图片</span>
          </template>

          <template v-else-if="column.key === 'content'">
            <span v-if="record.type == 1">{{ record.content }}</span>
            <div v-if="record.type == 2">
              <a-popover placement="rightTop">
                <template #content>
                  <div class="popoverImg">
                    <img :src="record.content" alt="" />
                  </div>
                </template>
                <div class="imgBox">
                  <img :src="record.content" alt="获取失败..." />
                </div>
              </a-popover>
            </div>
          </template>

          <template v-else-if="column.key === 'action'">
            <a @click="edit(record)" style="margin-right: 10px">修改</a>
            <a @click="del(record.identifying)">删除</a>
          </template>
        </template>
      </a-table>

      <div style="text-align: right">
        <a-button @click="submit" style="border-radius: 6px" type="primary">确定</a-button>
      </div>

      <AddMsg ref="addMsgRef" @refresh="getList"></AddMsg>
    </template>
  </MyModal>
</template>

<style scoped lang="less">
.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 450px;
  img {
    width: 100%;
  }
}
</style>
